<template>
    <div class="query-input-title">
        <!-- <i class="fa-solid fa-comment-dots"></i> -->
        <el-icon>
            <Comment />
        </el-icon>
        <h5 class="query-input-title-item">知识库问题</h5>
    </div>
    <div class="query-method-box">
        <div class="method-net-box">

            <div class="net-content">
                <div>
                    <input type="checkbox" class="net-checkbox" v-model="netSearchEnabled">
                </div>
                <div class="net-title">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <span>启用联网搜索</span>
                </div>
            </div>
        </div>
        <div class="method-mrakdown-box">

            <div class="mrakdown-content">
                <div>
                    <input type="checkbox" class="mrakdown-checkbox" v-model="mrakdownSearchEnabled">
                </div>
                <div class="mrakdown-text">

                    <img src="@/assets/images/rebot.png" alt="">
                    <span>启用多跳模型推理</span>
                </div>
            </div>
        </div>
    </div>



    <div class="query-input-box">
        <div class="query-input-title2">
            请输入知识库相关问题
        </div>
        <div class="query-input">
            <textarea v-model="query" placeholder="在此输入您的问题" rows="4" class="input-area"></textarea>
        </div>


    </div>
    <div class="btn-box">
        <button class="submit-btn" @click="handleSubmit" :disabled="isSending" :class="{ 'disabled': isSending }">{{
            isSending === true ? "推理中..." : "提交问题" }}</button>
        <button class="clear-btn" @click="handleClear">清空</button>
    </div>
    <div class="question-container">
        <div class="quick-question-box">
            <div class="quick-question-title">快速提问示例：</div>
            <div class="quick-question-content">
                <ul>
                    <li v-for="(question, index) in quickQuestions" :key="index" @click="handleQuickQuestion(question)">
                        {{ question }}
                    </li>
                </ul>
            </div>
        </div>
        <div class="knowledge-example-box">
            <div class="knowledge-example-title">知识库示例：</div>
            <div class="knowledge-example-content">
                <div class="file-item">
                    <input type="checkbox" class="file-checkbox" :checked="exampleFileSelected"
                        @change="handleExampleFileChange($event)">
                    <span>《临床诊疗指南.PDF》</span>
                    <a :href="`./临床诊疗指南.PDF`" download>
                        <i class="fa-solid fa-download"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="message-box">
        <Chatmessage :raw-data="resRaw" :send-loading="isSending" />
    </div>


</template>



<script src="./queryInput.js"></script>
<style src="./queryinput.css" scoped></style>